<template>
  <!-- 房东列表 -->
  <nav class="boxe">
    <div class="topewt">
      <el-input
        v-model="searchValuelan"
        placeholder="请输入关键词 如 姓名/手机号/身份证号"
      ></el-input>
      <!-- @keyup.enter.native="search" -->
      <el-button type="primary" icon="el-icon-search" @click="searchlan()"
        >搜索</el-button
      >
    </div>
    <!-- 
    <div class="labelpage">
      <span>搜索条件 :</span>
    </div> -->

    <!-- 表格 -->
    <div class="formewt">
      <!-- 表格数据 -->
      <el-table
        :data="ewtData"
        :header-cell-style="{ background: '#eef1f6', color: '#000' }"
        style="width: 100%"
        max-height="100%"
      >
        <el-table-column prop="id" label="房东编号"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="phone" label="手机号" width="200">
        </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="identityCard" label="身份证号" width="200">
        </el-table-column>
        <el-table-column prop="roleId" label="房源信息"> </el-table-column>
        <el-table-column prop="isAuth" label="是否认证">
          <template slot-scope="scope">
            {{ scope.row.isAuth == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="hanhlaEdit(scope.$index, scope.row)"
              type="text"
              size="small"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 租客详情页面 -->
      <el-dialog title="房东详情" :visible.sync="dialogLableVisible">
        <nav id="boxEwt">
          <div class="boxEwtz">
            <div class="boxEwtv">
              <div class="divewt">
                <ul>
                  <div><span>|</span>房源信息</div>
                  <li>
                    <div>小区名称： {{ grihData.buildingName }}</div>
                  </li>
                  <li>
                    <div>小区地址：{{ grihData.buildingAddress }}</div>
                  </li>
                  <li>
                    <div>房屋配置：{{ grihData.facilityNames }}</div>
                  </li>
                </ul>
              </div>
            </div>

            <div class="boxEwts"></div>
          </div>

          <div>
            <ul>
              <div><span>|</span>房东信息</div>
              <li>
                <div>姓名：{{ grihData.name }}</div>
              </li>
              <li>
                <div>电话：{{ grihData.phone }}</div>
              </li>
              <li>
                <div>身份证号：{{ grihData.identityCard }}</div>
              </li>
              <li>
                <span>认证信息：</span>
                <span>{{ grihData.faceImage }}</span>
              </li>
            </ul>
          </div>
        </nav>
      </el-dialog>
      <!-- 租客详情页面 -->
      <!-- 表格数据 -->

      <!-- 分页 -->
      <div style="text-align: right;">
        <el-pagination
          class="Pagenubvf"
          background
          layout="prev, pager, next"
          :total="this.count"
          @current-change="changeEwt"
          :page-count="nowEwt"
        >
        </el-pagination>
      </div>
      <!-- 分页结束 -->
    </div>
    <!-- 表格结束 -->
  </nav>
</template>
<script>
// import {Select} from 'element-ui';
import { queryLllUser, queryKllUser } from "@/api/UserList";
export default {
  name: "lanorList",
  components: {},
  computed: {
    ewtData() {
      let qishi = (this.nowEwt - 1) * 10;
      return this.userEwt.slice(qishi, qishi + 10);
    },
  },
  data() {
    return {
      page: 1,
      limit: 2,
      count: 0,
      userEwt: [],
      grihData: [],
      searchLanorList: [],
      nowEwt: 1,
      searchValuelan: "",
      dialogLableVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    searchlan() {
      let searchLanorList = this.userEwt.filter(
        (item) =>
          !this.searchValuelan ||
          item.name.includes(this.searchValuelan) ||
          item.phone.includes(this.searchValuelan) ||
          item.identityCard.includes(this.searchValuelan)
      );
      this.userEwt = searchLanorList;
    },

    //  请求数据并渲染
    selectData(data) {
      queryLllUser(data).then((res) => {
        console.log(res);
        if (res.msg == "请求成功!") {
          this.userEwt = res.data;
          this.count = res.count;
        }
      });
    },

    // 每页10条
    ewtPage() {
      return Math.ceil(this.count / 10);
    },

    // 页码
    changeEwt(num) {
      this.page = num;
      let data = {
        page: this.page,
        iimit: this.limit,
      };
      this.selectData(data);
    },
    //  请求数据并渲染

    // 查询详情
    hanhlaEdit(index, row) {
      this.dialogLableVisible = true;
      queryKllUser({ id: row.id }).then((res) => {
        if (res.data != null) {
          this.grihData = res.data;
        } else {
          this.$message.error("未查询到信息");
          this.grihData = {};
          this.dialogLableVisible = false;
        }
      });
    },
    // 查询详情
  },

  created() {
    this.selectData({
      page: this.page,
      iimit: this.limit,
    });
  },
  updated() {
    this.ewtPage();
  },
};
</script>

<style lang="less" scoped>
.boxe {
  // padding: 0 30px 0 30px;
  .topewt {
    margin-bottom: 20px;
    .el-input {
      width: 350px;
      margin: 0 50px 0 0px;
      color: #000;
    }
  }

  // 搜索条件样式
  //   .labelpage {
  //     width: 100%;
  //     height: 60px;
  //     background-color: #f4f6f5;
  //     margin: 20px 0 20px 0;

  //     span {
  //       //   color: #F4F6F5;
  //       line-height: 60px;
  //       margin-left: 10px;
  //     }
  //   }
  //   搜索条件样式结束

  .formewt {
    width: 100%;
    height: 100%;
    .el-input.style {
      height: 100%;
    }

    // 表格样式
    .el-table {
      .el-table th .el-table__cell {
        background-color: aqua;
        height: 70px;
      }
    }
    // 表格样式

    // 弹框样式
    .el-dialog {
      .el-dialog__header {
        border-bottom: 1px rgb(221, 216, 216) solid;
      }
      #boxEwt {
        width: 100%;
        height: 400px;
        // background-color: aqua;
        li {
          list-style: none;
          margin: 10px 0 10px 0;
        }

        .boxEwtz {
          width: 100%;
          height: 150px;
          // background-color: chocolate;

          .boxEwtv {
            width: 70%;
            height: 150px;
            // background-color: blueviolet;
            float: left;

            .divewt {
              width: 100%;
              height: 150px;
              // background-color: blue;
              float: left;
            }
          }

          .boxEwts {
            width: 20%;
            height: 200px;
            // background-color: red;
            float: right;
          }
        }
      }
    }
    // 弹框样式

    // 页码样式
    .Pagenubvf {
      margin-top: 30px;
      float: right;
    }
    // 页码样式结束
  }
}
.el-button {
  width: auto !important;
}
</style>